<template>
  <div class="dish-management">
    <h1>菜品信息管理</h1>
    
    <!-- 筛选表单 -->
    <div class="filter-form">
      <el-form :inline="true" :model="filterParams" class="demo-form-inline" >
        <el-form-item label="状态">
          <el-select v-model="filterParams.status" placeholder="选择状态" clearable style="width: 100px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="可售" value="available"></el-option>
            <el-option label="不可售" value="unavailable"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="是否清真">
          <el-select v-model="filterParams.isHalal" placeholder="是否清真" clearable style="width: 100px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="是否热食">
          <el-select v-model="filterParams.isHot" placeholder="是否热食" clearable style="width: 100px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="fetchDishes">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 菜品表格 -->
    <el-table :data="dishList" border style="width: 100%">
      <el-table-column prop="dishId" label="ID" width="80"></el-table-column>
      <el-table-column prop="dishName" label="菜品名称"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="price" label="价格" width="120">
        <template #default="{row}">
          ¥{{ row.price.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="图片" width="120">
        <template #default="{row}">
          <el-image 
            style="width: 80px; height: 80px"
            :src="row.imageUrl" 
            :preview-src-list="[row.imageUrl]"
            fit="cover"
            hide-on-click-modal
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="清真" width="80">
        <template #default="{row}">
          <el-tag :type="row.isHalal ? 'success' : 'danger'">
            {{ row.isHalal ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="热食" width="80">
        <template #default="{row}">
          <el-tag :type="row.isHot ? 'danger' : 'info'">
            {{ row.isHot ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{row}">
          <el-tag :type="row.status === 'available' ? 'success' : 'warning'">
            {{ row.status === 'available' ? '可售' : '不可售' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{row}">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button 
            size="small" 
            type="danger" 
            @click="handleDelete(row.dishId)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="filterParams.page"
        v-model:page-size="filterParams.size"
        :page-sizes="[5, 10, 20, 50]"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="fetchDishes"
        @current-change="fetchDishes"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

// 菜品列表数据
const dishList = ref([])
const totalCount = ref(0)

// 筛选参数
const filterParams = ref({
  page: 1,
  size: 10,
  status: '',
  isHalal: '',
  isHot: ''
})

// 获取菜品列表
const fetchDishes = async () => {
  try {
    // 过滤掉空值的参数
    // const params = Object.fromEntries(
    //   Object.entries(filterParams.value).filter(([_, v]) => v !== '')
    // )
    const params = {
      page: filterParams.value.page,
      size: filterParams.value.size,
      // 转换参数命名和值
      ...(filterParams.value.status && { status: filterParams.value.status }),
      ...(filterParams.value.isHalal !== '' && { is_halal: filterParams.value.isHalal ? 1 : 0 }),
      ...(filterParams.value.isHot !== '' && { is_hot: filterParams.value.isHot ? 1 : 0 })
    }

    console.log(params)
    
    const response = await axios.post('http://localhost:8081/dishes/list', params, {
        headers: {
        'Content-Type': 'application/json'
        }
    });
    
    if (response.data.code === 200) {
      dishList.value = response.data.data.list
      totalCount.value = response.data.data.count
    } else {
      ElMessage.error(response.data.message || '获取菜品列表失败')
    }
  } catch (error) {
    ElMessage.error('请求失败: ' + error.message)
  }
}

// 重置筛选条件
const resetFilter = () => {
  filterParams.value = {
    page: 1,
    size: 10,
    status: '',
    categoryName: '',
    isHalal: '',
    isHot: ''
  }
  fetchDishes()
}

// 编辑菜品
const handleEdit = (row) => {
  ElMessage.info(`编辑菜品ID: ${row.dishId}`)
  // 这里可以跳转到编辑页面或打开编辑对话框
}

// 删除菜品
const handleDelete = (dishId) => {
  ElMessageBox.confirm('确定要删除这个菜品吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 这里应该是调用删除接口
      await axios.delete(`http://localhost:8081/dishes/delete/${dishId}`)
      ElMessage.success('删除成功')
      fetchDishes() // 刷新列表
    } catch (error) {
      ElMessage.error('删除失败: ' + error.message)
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 组件挂载时获取数据
onMounted(() => {
  fetchDishes()
})
</script>

<style scoped>
.dish-management {
  padding: 20px;
}

.filter-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.el-tag {
  margin: 2px;
}
</style>